<template>
  <div class="switch-title">
    <div class="inline-block">
      <title-tooltip class="title-tooltip" :title="title" :titleTooltipContent="titleTooltipContent" :titleTooltipMaxWidth="800" />
    </div>
    <a-switch v-model="switchVal" :checked-value="1" :unchecked-value="0" class="inline-block switch" @change="switchChangeFn" />
    <slot></slot>
  </div>
</template>
<script setup name="HolidayConfigSwitchTitle">
  import { useVModel } from '@vueuse/core'
  const props = defineProps({
    title: String,
    titleTooltipContent: String,
    modelValue: Number,
  })
  const emit = defineEmits(['update:modelValue', 'change'])
  const switchVal = useVModel(props, 'modelValue', emit)

  const switchChangeFn = (val) => {
    emit('change', val)
  }
</script>
<style lang="less" scoped>
  .title-tooltip {
    :deep(.title-left) {
      line-height: 24px;
    }
    :deep(svg) {
      vertical-align: middle;
      margin-left: 4px;
    }
  }
  .switch {
    margin-left: 24px;
  }
</style>
